<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户端-信息管理</title>
    <link rel="stylesheet" href="/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!-- 内容主体区域-->
    <div class="layui-body">
        <div style="padding: 30px;" class="layui-fluid">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <span class="layui-badge-dot"></span> <span
                        class="layui-badge-dot layui-bg-orange"></span> <span
                        class="layui-badge-dot layui-bg-green"></span> <span
                        class="layui-badge-dot layui-bg-cyan"></span> <span
                        class="layui-badge-dot layui-bg-blue"></span> <span
                        class="layui-badge-dot layui-bg-black"></span> <span
                        class="layui-badge-dot layui-bg-gray"></span>
                    <fieldset class="layui-elem-field layui-field-title"
                              style="margin-top: 30px;">
                        <legend>资料修改</legend>
                    </fieldset>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-md1">&nbsp;</div>
                <div class="layui-col-md9">
                    <fieldset class="layui-elem-field">
                        <legend>资料修改</legend>
                        <form id="reform" class="layui-form layui-form-pane" lay-filter="formFilter" action="/user/userUpdate" method="post" style="padding: 30px;">

                            <input type="hidden" name="stuid" value="1">

                            <div class="layui-form-item">
                                <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                                    <i class="layui-icon layui-icon-upload"></i> 单图片上传
                                </button>
                                <div style="width: 132px;">
                                    <div class="layui-upload-list">
                                        <img src="/images/user01.jpg" class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                                        <div id="ID-upload-demo-text"></div>
                                    </div>
                                    <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                                        <div class="layui-progress-bar" lay-percent=""></div>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">用户编号</label>
                                <div class="layui-input-inline">
                                    <input type="text"  name="user_id"  class="layui-input"
                                           th:value="${loginUser.user_id}">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="user_name" lay-verify="name" autocomplete="off" class="layui-input"
                                           th:value="${loginUser.user_name}">
                                </div>
                            </div>

                            <div class="layui-form-item" pane="">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="user_gender" value="0" title="男"
                                           th:checked="${loginUser.user_gender == '男' or loginUser.user_gender == '0'}">
                                    <input type="radio" name="user_gender" value="1" title="女"
                                           th:checked="${loginUser.user_gender == '女' or loginUser.user_gender == '1'}">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">年龄</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="age" lay-verify="name" autocomplete="off" class="layui-input"
                                           th:value="${loginUser.age}">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">星座</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="constellation" lay-verify="name" autocomplete="off" class="layui-input"
                                           th:value="${loginUser.constellation}">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-inline">
                                    <label class="layui-form-label">学校</label>
                                    <div class="layui-input-block" style="width: 200px;">
                                        <input name="school" placeholder="南昌大学" class="layui-input" id="ID-dropdown-demo-base-input" autocomplete="off"
                                               th:value="${loginUser.school}">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">专业</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="major" lay-verify="name" autocomplete="off" class="layui-input"
                                           th:value="${loginUser.major}">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">自我介绍</label>
                                <div class="layui-input-inline">
                                    <textarea th:value="${loginUser.self_introduction}" name="self_introduction" placeholder="我是一个具有2年工作经验的Java软件工程师。" class="layui-textarea" style="width: 200%"></textarea>
                                </div>
                            </div>


                            <div class="layui-form-item">
                                <button class="layui-btn" lay-submit="reform" lay-filter="reform">保存</button>
                            </div>
                        </form>
                    </fieldset>

                </div>
                <div class="layui-col-md1">&nbsp;</div>
            </div>

        </div>

    </div>

    <div class="layui-footer" align="center">
        <!-- 底部固定区域 -->
        © - 联系校事达官方客服：6666666
    </div>
</div>

<script src="./layui2_9/layui.js"></script>

<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
        // 监听侧边导航栏的点击事件
        element.on('nav(test)', function (elem) {
            var parentLi = elem.closest('li.layui-nav-item');
            var allNavItems = document.querySelectorAll('.layui-nav-tree.layui-nav li.layui-nav-item');
            // 遍历所有导航项
            allNavItems.forEach(function (item) {
                if (item!== parentLi) {
                    // 关闭其他导航项的子菜单
                    var childMenu = item.querySelector('dl.layui-nav-child');
                    if (childMenu) {
                        // 移除 layui-nav-itemed 类以关闭菜单
                        // item.classList.remove('layui-nav-itemed');
                    }
                }
            });
            // 切换当前点击的导航项的展开/关闭状态
            // parentLi.addClass("layui-nav-itemed")
        });
    });
</script>

<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer;

        //自定义验证规则
        form.verify({
            name: function (value) {
                if (value.length < 1) {
                    return '姓名至少得1个字符啊';
                }
            }
        });

        //监听提交
        form.on('submit(reform)', function (data) {
            /*layer.alert(JSON.stringify(data.field), {
                title : '最终的提交信息'
            })*/
            //return false;
        });

    });
</script>
<script>
    var form;
    layui.use(['layedit', 'form'], function () {
        form = layui.form;
    });
    //加载layui中的jq
    layui.use(['jquery', 'layer'], function () {
        var $ = layui.$, //重点处
            layer = layui.layer;

        $(function () {
            $.post(
                "userUpdate.html",
                {},
                function (data) {
                    var obj = JSON.parse(data);
                    var str = "";
                    for (var i = 0; i < obj.length; i++) {
                        var optionStr = "";
                        optionStr += "<option value='" + obj[i].schoolid + "'>" + obj[i].name + "</option>";
                        $("#schoolid").append(optionStr);
                        $("#schoolid").val(1);
                        form.render('select', 'formFilter');
                    }
                }
            );
        });

    });
</script>
<script>
    layui.use(function(){
        var dropdown = layui.dropdown;
        // 绑定输入框
        dropdown.render({
            elem: '#ID-dropdown-demo-base-input',
            closeOnClick: false, // 不开启“打开与关闭的自动切换”，即点击输入框时始终为打开状态
            data: [{
                title: '中南大学',
                id: 101
            },{
                title: '湖南大学',
                id: 102
            },{
                title: '长沙大学',
                id: 103
            }],
            click: function(obj){
                this.elem.val(obj.title);
            },
            style: 'min-width: 235px;'
        })
    });
</script>
<script>
    layui.use(function(){
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: '/user/uploadP', // 实际使用时改成您自己的上传接口即可。
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });

                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                // 若上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                // …
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
            error: function(){
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function(n, elem, e){
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });

</script>
<script>
    function showPrivate(value) {
        window.sessionStorage.setItem("username",value);
        //iframe层
        layer.open({
            type: 2,
            title: '即时通信',
            shade: 0.6, // 遮罩透明度
            shadeClose: true, // 点击遮罩区域，关闭弹层
            area: ['1000px', '600px'],
            content: 'userTalk.html'
        });
    }
</script>
</body>
</html>
